<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <!--这里的title应和--auto-select-desktop-capture-source=record保持一致-->
    <title>record</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="./style.css"/>
    <script src="./rrweb.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      class Tracker {
        events = [];
        chunks = [];
        mediaRecorder = null;

        constructor(events) {
          this.events = events;
        }

        initPlayer = (options) => {
          const events = this.events || [];
          const player = new rrwebPlayer({
            target: document.body,
            data: {
              events,
              autoPlay: true,
              ...options
            },
          });

          player._state.replayer.emitter.on('finish', () => {
            this.mediaRecorder && this.mediaRecorder.stop();
          });
        };

        initDisplayRecord = async (options = {
          format: 'video/webm',
          callback: (data) => {
            console.log(data)
          }
        }) => {
          const {format, callback, timeslice} = options;

          const captureStream = await navigator.mediaDevices.getDisplayMedia({video: true});

          const mediaRecorder = new MediaRecorder(captureStream, {mimeType: format});

          mediaRecorder.addEventListener('stop', e => {
            console.log('stop')
          });

          mediaRecorder.addEventListener('dataavailable', event => {
            const data = event.data;
            if (data && data.size > 0) {
              const reader = new FileReader();

              reader.onload = (e) => {
                const result = e.target.result;
                callback({
                  data: result,
                  done: false
                })
              }

              reader.readAsBinaryString(data)
            }
          });

          if (timeslice !== undefined) {
            mediaRecorder.start(timeslice);
          } else {
            mediaRecorder.start();
          }
          this.mediaRecorder = mediaRecorder;
        }
      }

    </script>
</head>
<body>
</body>
</html>
